<template>
  <div class="authority">
    <el-card class="box-card">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/interface' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 权限列表 -->
      <div class="role">
        <el-table :data="tableData" height="100%" border style="width: 100%">
          <el-table-column
            type="index"
            width="50px"
            align="center"
            label="序号"
          >
          </el-table-column>
          <el-table-column prop="authName" align="center" label="权限名称">
          </el-table-column>
          <el-table-column prop="path" align="center" label="路径">
          </el-table-column>
          <el-table-column prop="level" align="center" label="权限层级">
            <template slot-scope="level">
              <el-tag v-if="level.row.level == 0" type="success">一级</el-tag>
              <el-tag v-else-if="level.row.level == 1" type="info">二级</el-tag>
              <el-tag v-else-if="level.row.level == 2" type="warning"
                >三级</el-tag
              >
              <el-tag v-else type="danger">四级</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    authorityList() {
      this.axios.get("rights/list").then(
        (res) => {
          console.log(res);
          this.tableData = res.data.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  mounted() {
    this.authorityList();
  },
};
</script>

<style lang='less' scope>
.authority {
  width: 100%;
  .box-card {
    height: 82vh;
    //权限列表
    .role {
      margin-top: 30px;
      height: 73vh;
    }
  }
}
</style>